import React, { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Card, Empty, Spin, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';

interface PageData {
  title: string;
  components: any[];
}

/**
 * 预览页面，用于展示设计结果
 * @returns 预览页面组件
 */
const Preview: React.FC = () => {
  const [searchParams] = useSearchParams();
  const projectId = searchParams.get('id');

  const [loading, setLoading] = useState(true);
  const [pageData, setPageData] = useState<PageData | null>(null);

  // 模拟加载预览数据
  useEffect(() => {
    const timer = setTimeout(() => {
      // 这里将来会从API或状态管理中获取实际数据
      setPageData({
        title: '预览项目',
        components: [],
      });
      setLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, [projectId]);

  // 返回编辑器
  const handleBackToEditor = () => {
    window.history.back();
  };

  return (
    <div className="preview-container">
      {/* 顶部栏 */}
      <div
        style={{
          padding: '12px 16px',
          borderBottom: '1px solid #f0f0f0',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <Button icon={<ArrowLeftOutlined />} type="text" onClick={handleBackToEditor}>
          返回编辑器
        </Button>
        <span style={{ marginLeft: 16 }}>{pageData?.title || `项目预览 (ID: ${projectId})`}</span>
      </div>

      {/* 预览内容 */}
      <div
        style={{
          padding: '20px',
          display: 'flex',
          justifyContent: 'center',
          minHeight: 'calc(100vh - 64px)',
          background: '#f5f5f5',
        }}
      >
        <Card
          style={{
            width: 375,
            minHeight: 667,
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
          }}
        >
          {loading ? (
            <div
              style={{
                height: '100%',
                minHeight: 500,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Spin tip="加载中..." />
            </div>
          ) : pageData?.components?.length ? (
            <div id="preview-content">
              {/* 这里将来会渲染实际组件 */}
              <p>实际页面内容将在这里渲染</p>
            </div>
          ) : (
            <Empty description="暂无内容可预览" />
          )}
        </Card>
      </div>
    </div>
  );
};

export default Preview;
